/**
 * 2018/05/10 by xiongisxiong
 * 小部件：上图下文字，几个排一排或一列的弹性盒子布局
 */
import React, { PureComponent } from 'react'
import { View, Text, StyleSheet } from 'react-native'

import Icon from 'react-native-vector-icons/Ionicons'
import { screen, color } from '../utils'

export default class IconMenu extends PureComponent{
  render() {
    const { title, iconName } = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.iconContainer}>
          <Icon name={iconName} size={25} color={color.theme} />
        </View>
        <Text style={styles.text}>{title}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
      justifyContent: 'center',
      alignItems: 'center',
      width: screen.width / 4,
      height: screen.width / 4,
  },
  iconContainer: {
      height: '50%',
      width: '50%',
      borderRadius: 50,
      borderWidth: 2,
      borderColor: color.theme,
      justifyContent: 'center',
      alignItems: 'center'
  },
  text: {
      marginTop: 5,
      fontSize: 11,
      color: color.black
  }
});